<template>
  <div
    class="formula"
    data-type="formula"
    contenteditable="false"
    :data-latex="formulaData.latex || ''"
    :data-unit="formulaData.unit"
    :data-formula-number="formulaData.formulaNumber"
    :data-id="formulaData.dataId"
    :data-block-id="blockData.blockId"
    :data-image-width="imgWidth * 2"
    :data-image-height="imgHeight * 2"
  >
    <iframe-checkbox :blockData="blockData" />
    <div class="img-wrapper irremovable" :data-formula-number="formulaData.formulaNumber">
      <img
        contenteditable="true"
        :src="imgSrc"
        :style="imgStyle"
        :data-img-latex="formulaData.latex || ''"
        :width="imgWidth"
        :height="imgHeight"
      />
      <div class="formula-unit irremovable" contenteditable="false">{{ formulaData.unit }}</div>
      <div class="dotline irremovable" contenteditable="false" :style="{ height: imgHeight / 2 + 'px' }"></div>
    </div>
    <!-- <p>式中：</p>
    <div class="variables" contenteditable="true">
      <Paragraph v-for="c of formulaData.variableList" :data-id="c.dataId" :key="c.dataId" :blockData="c"></Paragraph>
    </div> -->
  </div>
</template>

<script>
import { getTextWidth } from '@/utils/dom'
import IframeCheckbox from '../IframeCheckbox.vue'
export default {
  components: { IframeCheckbox },
  props: {
    dataId: { type: String, default: '' },
    container: { type: String, default: '' },
    blockData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    formulaData() {
      return this.blockData.formulaData
    },
    imgSrc() {
      return this.formulaData.url || this.formulaData.src
    },
    imgWidth() {
      return parseInt(this.formulaData.width)
    },
    imgHeight() {
      return parseInt(this.formulaData.height)
    },
    unitWidth() {
      return getTextWidth(this.formulaData.unit || '') || 0
    },
    imgStyle() {
      return { 'margin-left': 'calc(50% - ' + (this.imgWidth + this.unitWidth) / 2 + 'px)' }
    }
  }
}
</script>
